<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="./lib/echarts.min.js"></script>
    </head>
    <body>
        <div id="main" style="width: 600px; height: 400px"></div>
        <script>
            // 1. 引入 echarts
            // 2. 创建一个容器div
            // 3. 初始化 echarts 并选择容器
            // 4. 设置配置项 option
            // 5. 使用 setOption 方法，设置数据

            // grid 选项 表示直角坐标系绘制区域
            //  show ：是否显示网格
            //  left，right，top，bottom 距离容器上下左右的距离
            //  containLabel 区域是否包含坐标轴的刻度标签
            //  backgroundColor 背景颜色
            const myChart = echarts.init(document.querySelector("#main"));
            const option = {
                // 标题
                title: {
                    text: "Eharts 入门案例",
                },
                // 图例
                legend: {
                    // 已什么数据为图例
                    data: ["销量"],
                },
                grid: {
                    show: true,
                    left: 0,
                    bottom: 0,
                    containLabel: true,
                    backgroundColor: "rgba(0, 255, 0, 0.1)",
                },
                // x轴
                xAxis: {
                    data: [
                        "衬衫",
                        "羊毛衫",
                        "雪纺衫",
                        "裤子",
                        "高跟鞋",
                        "袜子",
                    ],
                },
                // y轴(暂时不做处理，靠x轴的数据量自适应)
                yAxis: {},
                // 数据，一般情况下是和x轴对应的
                series: [
                    {
                        name: "销量",
                        // 图形的形状 bar 是柱状图的意思
                        type: "bar",
                        data: [5, 20, 36, 10, 10, 20],
                    },
                ],
            };
            myChart.setOption(option);
        </script>
    </body>
</html>
